<template>
	<view style="background-color: #e6e6e6;">
		<view class="tianqi">
			<view style="text-align: center; flex-direction: row;font-size: 15px; margin-top: 30rpx;">
				<text class="new-weathbox">{{totime}}</text>
				<text class="new-weathbox">{{tonumber}}</text>
				<text class="new-weathbox">{{toptem}}</text>
				<text class="new-weathbox">{{bottomtem}}</text>
			</view>
			<view>
			</view>
		</view>
		<view v-for="item in news" :key="item.nid">
			<NewCardView
				:jds="item.jds"
				:isTop="item.isTop"
				:author="item.author"
				:time="item.time"
				:comments="item.comments"
				:isslot="item.Isslot"
				:mode="item.mode"
				:image="item.Imagelist[0]"
			>
				<template v-slot:taidu v-if="item.Isslot">
					<view style="display: flex; flex-direction: row;margin-left: 5rpx;">
						<text style="font-size: 3rpx; color: #e638b2; padding: 6rpx;">搜索:</text>
						<text style=" border: 1px solid #e638b2; padding: 6rpx; font-size: 9rpx; color: #e638b2;">台独</text>
					</view>
				</template>
			</NewCardView>
		</view>
	</view>
</template>

<script>
	import data from "/data/news.json";
	import NewCardView from "/components/cardViewText.vue";
	export default {
		components: {
			NewCardView
		},
		data() {
			return {
				news:[],
				totime:"",
				tonumber:"",
				toptem:"",
				bottomtem:"",
			}
		},
		onLoad() {
			this.news=data.lisst;
			console.log("本地新闻数据：", this.news);
			this.WeaShow();
		},
		methods: {
			WeaShow(){
				uni.request({
					url:"http://t.weather.sojson.com/api/weather/city/101230501",
					success: (res) => {
						console.log("接口返回数据：", res.data);
						if(res.data.status==200){
							const forecast = res.data.data.forecast[0];
							this.totime=forecast.ymd,
							this.tonumber=forecast.week,
							this.toptem=forecast.high,
							this.bottomtem = forecast.low
						}
					},
					fail: (err) => {
					      console.error("接口请求失败：", err);
					    }
				})
			},
		}
	}
</script>

<style>
	page {
		width: 100%;
		min-height: 100vh; 
		margin: 0;
		padding: 0;
		background-color: #e6e6e6; 
	}
	.tianqi{
		background-color: #c72112;
		color: white; 
		flex-direction:row;
		justify-content: space-between;
		height: 40px;
		display: flex;
		margin: 0 auto;
	}
	.new-weathbox{
		font-size: 12px;
		margin-right: 5px;
	}
</style>